<template>
  <div class="innerPageTable-out-flex">
    <NameSpace @clickNamespace="clickNamespace"></NameSpace>
    <SelfAdaption>
      <Form
        :model="formSearch"
        ref="formRef"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="serviceName" label="服务名称">
          <Input type="text" v-model.trim="formSearch.serviceName" @on-enter="searchInfo"></Input>
        </Form-item>
        <Form-item prop="groupName" label="分组名称">
          <Input type="text" v-model.trim="formSearch.groupName" @on-enter="searchInfo"></Input>
        </Form-item>
        <Form-item prop="hasIpCount" label="隐藏空服务">
          <i-switch v-model="formSearch.hasIpCount" @on-change="searchInfo"></i-switch>
        </Form-item>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="searchInfo" />
          <RPButton optType="reset" @click="formReset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="tableRef" :config="pageTableConfig"> </InnerPageTable>
  </div>
</template>

<script>
import API from "@/api/serviceList";
import { generateColumns } from "./colomns";
import serviceDetail from "./serviceDetail";
export default {
  name: "serviceListIndex",
  components: {},
  props: {},
  data() {
    return {
      formSearch: {
        serviceName: "",
        groupName: "",
        hasIpCount: true,
        namespaceId: ""
      },
      pageTableConfig: {
        loadDataFn: this.getListPage,
        columns: generateColumns.bind(this)(),
        autoFirst: false,
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    clickNamespace(val) {
      this.formSearch.namespaceId = val;
      this.$nextTick(() => {
        this.searchInfo();
      })
    },
    goSubscriber(row) {
      this.$router.push({
        name: "subscriber-code",
        query: {
          name: row.name,
          groupName: row.groupName,
          namespaceId: this.formSearch.namespaceId
        }
      });
    },
    getListPage: tableObj => {
      let { responseProcess, initParam, param } = tableObj;
      return API.getListPage({
        ...initParam,
        ...param
      }).then(data => {
        responseProcess(data);
      });
    },
    detailHandle(row) {
      new this.$sidelipPage(serviceDetail, { props: { row,namespaceId: this.formSearch.namespaceId } });
    },
    // 搜索查询
    searchInfo() {
      this.$refs["tableRef"].load(this.formSearch);
    },
    // 搜索重置
    formReset() {
      this.$refs["formRef"].resetFields();
      this.searchInfo();
    }
  },
  computed: {},
  watch: {}
};
</script>

<style lang='less' scoped >
</style>
